<template>
    <div >
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>订单信息</span>
                <span></span>
            </div>
            <el-descriptions title="">
                <el-descriptions-item label="订单编号">
                    <span style="cursor:pointer;color:blue" @click="orderGo(value.orderCode)">{{ value.orderCode|filterNull }}</span> 
                </el-descriptions-item>
                <el-descriptions-item label="客户名称">
                    {{ value.customName|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="出租方">
                    {{ value.lessorName|filterNull }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="催收进度">{{ form.collectionProcess|filterNull }}</el-descriptions-item> -->
            </el-descriptions>


        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>诉讼信息</span>
                <span></span>
            </div>
            <el-descriptions title="" :column=2>
                <el-descriptions-item label="诉讼申请原因">
                    {{ value.proceedReason|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="诉讼方案">
                    {{ value.proceedPlan|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="附件上传" v-if="value.proceedFile">
                    <div class="flex" >
                        <ImageCommon disabled v-model="value.proceedFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>合同信息</span>
                <span></span>
            </div>
            <el-descriptions title="" :column=2>
                <el-descriptions-item label="租赁合同" v-if="value.leaseFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.leaseFile" :up-type="2" info="选择附件" :limit="1"></ImageCommon>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="买卖合同" v-if="value.tradeFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.tradeFile" :up-type="2" info="选择附件" :limit="1"></ImageCommon>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="担保合同" v-if="value.assureFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.assureFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>交车信息</span>
                <span></span>
            </div>
            <el-descriptions title="" :column=1>
                <el-descriptions-item label="出库交车单" v-if="value.outShedDeliveryFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.outShedDeliveryFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="还车交车单" v-if="value.rerurnCarDeliveryFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.rerurnCarDeliveryFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>客户回单发票</span>
                <span></span>
            </div>
            <el-descriptions title="" :column=2>
                <el-descriptions-item label="客户银行回单" v-if="value.bankReceiptFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.bankReceiptFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="客户发票回单" v-if="value.invoiceFile">
                    <div class="flex">
                        <ImageCommon disabled v-model="value.invoiceFile" :up-type="2" info="选择附件" :limit="20"></ImageCommon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>费用信息</span>
                <span></span>
            </div>
            <el-descriptions title="">    
                <el-descriptions-item label="累计未结清费用">
                    {{ format_thousand(value.allNoPayoffCost) }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
         <!-- 未结清 -->
        <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单未结清费用</span>
                    <span></span>
                </div>
                <el-descriptions title="">    
                    <el-descriptions-item label="费用总计">
                        <span >{{ format_thousand(value.contractNoPayoffCost) }}</span> 
                    </el-descriptions-item>
                </el-descriptions>
                <el-collapse v-model="activeNames" @change="handleChange" v-for="(item,index) in value.resultOverDueVoList" :key="index">
                    <el-collapse-item title="" :name="index">
                        <template slot="title">
                            <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                            <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                        </template>
                        <el-table fit :data="item.costContractList" border >
                            <el-table-column prop="proceedsTypeStr" label="费用类型" align="center">
                                <template v-slot="{row}">
                                    <dict-tag :options="dict.type.progress_litigation" :value="row.proceedsTypeStr"/>
                                </template>
                            </el-table-column>
                            <el-table-column prop="receivableAmount" label="费用金额" align="center" >
                                <template slot-scope="scope">
                                    <span>{{ format_thousand(scope.row.receivableAmount) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="periodsNum" label="期数" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.periodsNum || '-' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="overdueDay" label="逾期天数" align="center"></el-table-column>
                            <el-table-column prop="repaymentTime" label="应收日期" align="center"></el-table-column>
                        </el-table>
                    </el-collapse-item>
                    </el-collapse>
        </div>
        <!-- 已结清 -->
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>合同期内已生成账单已结清费用</span>
                <span></span>
            </div>
            <el-descriptions title="">    
                <el-descriptions-item label="费用总计">
                    <span >{{ format_thousand(value.contractPayoffCost) }}</span> 
                </el-descriptions-item>
            </el-descriptions>
            <el-collapse v-model="activeNames1"  v-for="(item,index) in value.resultVoList" :key="index">
                <el-collapse-item title="一致性 Consistency" name="1">
                    <template slot="title">
                    <span>车牌号:</span><span style="margin-right: 15px;">{{ item.carCode|filterNull }}</span>
                    <span>品牌/车系/车型:</span><span>{{ item.brandName }}{{ item.seriesName }}{{ item.modelName }}</span>
                    </template>
                    <el-table fit :data="item.costContractList" border v-if="tableCloumns.length > 0">
                        <TableCloumn v-for="item in tableCloumns" :cellOptions="item"></TableCloumn>
                        <el-table-column
                                    label="收款凭证"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="scope.row.earningProve"></ImageCommon>
                                    </template>
                            </el-table-column>
                            <el-table-column
                                    label="发票"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="scope.row.url"></ImageCommon>
                                    </template>
                            </el-table-column>
                    </el-table>
                </el-collapse-item>
                </el-collapse>
        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>合同期内或合同期外未还车发生诉讼产生的未结清费用</span>
                <span></span>
            </div>
            <el-descriptions title="" style="position: relative;">    
                <el-descriptions-item label="费用总计">
                    <span >{{ format_thousand(value.contractOverdueCost) }}</span>
                </el-descriptions-item>
            </el-descriptions>
                <el-table fit :data="value.overdueVoList" border style="margin-top:10px">
                    <el-table-column prop="carCode" label="车牌号"  fixed="left" width="100" align="center">
                        <!-- <template v-slot="{row}">
                            <el-input v-model="row.carCode"></el-input>
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="overdueCost" label="超期租金" width="100" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.overdueCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="defaultCost" label="违约金" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.defaultCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="peccanCost" label="违章费" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.peccanCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="carDamageCost" label="车损费用" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.carDamageCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="depreciationCost" label="加速折旧费" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.depreciationCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="overMileageCost" label="超里程费" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.overMileageCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="balanceCost" label="尾款" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.balanceCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="customClaimCost" label="客户理赔款" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.customClaimCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="otherCost" label="其他扣款费用" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.otherCost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center">
                        <template slot="header" slot-scope="scope">
                            <span>{{ item }}</span>
                        </template>
                        <template slot-scope="scope">
                            {{ format_thousand(scope.row[item]) }}
                        </template>
                    </el-table-column>
                </el-table>

        </div>
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>其他未结清费用</span>
                <span></span>
            </div>
            <el-descriptions title="">    
                <el-descriptions-item label="费用总计">
                    <span >{{ format_thousand(value.otherNoPayoffCost) }}</span>
                </el-descriptions-item>
            </el-descriptions>
                <el-table fit :data="value.otherVoList" border style="margin-top:10px;margin-bottom: 10px;" >
                    <el-table-column prop="costType" label="费用类型"  align="center" />
                    <el-table-column prop="cost" label="费用金额(元)" align="center" >
                        <template slot-scope="scope">
                            <span>{{ format_thousand(scope.row.cost) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="file" label="附件" align="center">
                        <template slot-scope="scope">
                            <ImageCommon disabled info="" :up-type="2" :limit="20" v-model="scope.row.file"></ImageCommon>
                        </template>
                    </el-table-column> 
                   
                </el-table>
        </div>
        <!-- <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>诉讼申请记录</span>
                <span></span>
            </div>
            <el-table fit :data="definitionList4" border v-if="tableCloumns4.length > 0">
                <TableCloumn v-for="item in tableCloumns4" :cellOptions="item"></TableCloumn>
            </el-table>
        </div> -->
        <div class="card-wrap flex-column justify-end card-padding">
            <div class="card-title-wrap">
                <span>诉讼更变记录</span>
                <span></span>
            </div>
            <el-table fit :data="value.proceedChangeVoList" border v-if="value.proceedChangeVoList">
                <el-table-column
                                label="诉讼变更编号"
                                align="center"
                            >
                            <template slot-scope="scope">
                                <span @click="goHistory(scope.row.id)" class="router_sty">{{ scope.row.proceedChangeCode }}</span>
                            </template>
                        </el-table-column>
                <TableCloumn v-for="item in tableCloumns5" :cellOptions="item"></TableCloumn>
            </el-table>
        </div>
    </div>
</template>

<script>

import Tabs from "@/components/Tabs/index.vue"
import TableCloumn from "@/views/finance/manage/tableColumn/index.vue";
import { OrderParam,} from '@/api/finance/manage/collect/api.js';

export default {
    name: "Application",
    props:{
        value: {
            type: Object,
            default: () => ({}),
        },
    },
    components: {Tabs,TableCloumn},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            activeNames: ['1'],
            activeNames1: ['1'],
            titleList:[],
            typeList:[],
            tableCloumns: [ ],
            tableCloumns1: [ ],
            tableCloumns2: [ ],
            tableCloumns3: [ ],
            tableCloumns4: [ ],
            tableCloumns5: [ ],
        };
    },
    watch:{
        titleList:{
            deep:true,
            handler(val){
                this.titleList = val
            }
        },
        'value.overdueJson':{
            deep:true,
            handler(value){
                if(value){
                    this.titleList = value[0]?.costJson?value[0]?.costJson:[]
                }
            },
            immediate:true,
        },
       
    },
    async created(){
        this.typeList = await this._getDicts("progress_litigation");
        this.tableCloumns = [
        {
                    label: "费用类型",
                    prop: "proceedsTypeStr",
                },
                {
                    label: "费用金额",
                    prop: "receivableAmount",
                    format: (row) => {
                        return this.format_thousand(row.receivableAmount);
                    },
                },
                {
                    label: "期数",
                    prop: "periodsNum",
                },
                {
                    label: "逾期天数",
                    prop: "overdueDay",
                },
                {
                    label: "应收日期",
                    prop: "repaymentTime",
                },
                
        ]
        this.tableCloumns1 = [
        {
                    label: "费用类型",
                    prop: "payeeType",
                    format: (row) => {
                        let word = "-";
                        let item = this.typeList.find(
                            (item) => item.dictValue == row.payeeType
                        );
                        item && (word = item.dictLabel);
                        return word;
                    },

                },
                {
                    label: "费用金额",
                    prop: "customName",
                },
                {
                    label: "期数",
                    prop: "carNo",

                },
                {
                    label: "应收日期",
                    prop: "pushType2",
                },
                {
                    label: "实收日期",
                    prop: "title",
                },
        
        ]
        this.tableCloumns2 = [
                {
                    label: "车牌号",
                    prop: "payeeType",
                },
                {
                    label: "品牌/车系/车型",
                    prop: "customName",
                },
                {
                    label: "超期租金",
                    prop: "carNo",
                },
                {
                    label: "违约金",
                    prop: "title",
                },
                {
                    label: "违章费",
                    prop: "pushType2",
                },
                {
                    label: "车损费用",
                    prop: "payeeType",
                },
                {
                    label: "加速折旧费",
                    prop: "customName",
                },
                {
                    label: "超里程费",
                    prop: "carNo",
                },
                {
                    label: "尾款",
                    prop: "title",
                },
                {
                    label: "客户理赔款",
                    prop: "pushType2",
                },
                {
                    label: "其他扣款费用",
                    prop: "pushType2",
                },
                
        ]
        this.tableCloumns3 = [
        {
                    label: "费用类型",
                    prop: "payeeType",
                    format: (row) => {
                        let word = "-";
                        let item = this.typeList.find(
                            (item) => item.dictValue == row.payeeType
                        );
                        item && (word = item.dictLabel);
                        return word;
                    },

                },
                {
                    label: "费用金额（元）",
                    prop: "customName",
                },
        ]
        this.tableCloumns4 = [
            {
                label: "提交人",
                prop: "payeeType",
            },
            {
                label: "提交时间",
                prop: "customName",
            },
            {
                label: "审批节点",
                prop: "payeeType",
            },
            {
                label: "审批状态",
                prop: "customName",
            },
        ]
        this.tableCloumns5 = [
            {
                label: "更变原因",
                prop: "changeReason",
            },
            {
                label: "提交人",
                prop: "createBy",
            },
            {
                label: "提交时间",
                prop: "createTime",
            },
            // {
            //     label: "审批节点",
            //     prop: "payeeType",
            // },
            {
                label: "审批状态",
                prop: "changeAuditStatus",
            },
            
        ]
    },
    methods: {
         // 订单编号跳转
         orderGo(info){
            OrderParam(info).then((res)=>{
                if(res.code==200){
                    this.$router.push({
                            name: 'OrderDetails',
                            query: {
                            type: res.data.carType,
                            beFrom: 'OrderView',
                            orderId: res.data.orderId,
                            preOrderId: res.data.preOrderId,
                            calcSchemeId: res.data.calcSchemeId,
                            },
                        })
                }
            })
            
        },
        // 预览图片
        previewImage(urls) {
            this._previewImages(urls);
        },
        // 折叠面板
        handleChange(val) {
      },
      // 跳转到诉讼变更申请
      goHistory(id){
        this.$router.push({name: 'IitigationInfo',query:{type:'infochange',id:id}})
      }
      
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
.router_sty{
    color: blue;
    cursor: pointer;
}
</style>
